<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="width: 120px; height: 150px;">
        <div class="ant-affix">
            <ul class="toc demos-anchor">
                <li title="介绍"><a href="#介绍">介绍</a></li>
                <li title="使用与安装"><a href="#使用与安装">使用与安装</a></li>
                <li title="基本语法"><a href="#基本语法">基本语法</a></li>
                <li title="Handlebar的表达式"><a href="#Handlebar的表达式">Handlebar的表达式</a></li>
                <li title="Handlebars的内置块表达式（Block helper）"><a href="#Handlebars的内置块表达式（Block helper）">Handlebars的内置块表达式（Block helper）</a></li>
                <li title="自定义helper"><a href="#自定义helper">自定义helper</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <!-- <h1>jQuery 基础库</h1> -->
        <p>
            <a href="http://mockjs.com/" target="_blank"><img src="/aifish/assets/img/mockjs.png" width="120" alt="logo"></a>
        </p>
         <h2>概述</h2>
<ul>
<li>基于 数据模板 生成模拟数据。</li>
<li>基于 HTML模板 生成模拟数据。</li>
<li>拦截并模拟 ajax 请求。</li>
</ul>
<h2>解决的问题</h2>
<p>开发时，后端还没完成数据输出，前端只好写静态模拟数据。</p>
<ul>
<li>数据太长了，将数据写在js文件里，完成后挨个改url。</li>
<li>某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。</li>
<li>想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。</li>
<li>特殊的格式，例如IP,随机数，图片，地址，需要去收集。</li>
<li>超烂的破网速…</li>
<li>…</li>
</ul>
<h2>以上都不再是问题</h2>
<p>接下来体验 <code>拦截ajax请求并返回模拟数据</code>。</p>
<h2>步骤1 - 安装</h2>
<p>安装太简单，跳过</p>
<h2>步骤2 - 配置模拟数据</h2>
<pre class="prettyprint language-javascript"><code><span class="typ">Mock</span><span class="pun">.</span><span class="pln">mock</span><span class="pun">(</span><span class="str">'http://g.cn'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="str">'name'</span><span class="pln">       </span><span class="pun">:</span><span class="pln"> </span><span class="str">'[@name](/user/name)()'</span><span class="pun">,</span><span class="pln">
    </span><span class="str">'age|1-100'</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">,</span><span class="pln">
    </span><span class="str">'color'</span><span class="pln">      </span><span class="pun">:</span><span class="pln"> </span><span class="str">'[@color](/user/color)'</span><span class="pln">
</span><span class="pun">});</span></code></pre><h2>步骤3 - 发送ajax请求(jquery版)</h2>
<pre class="prettyprint language-javascript"><code><span class="pln">$</span><span class="pun">.</span><span class="pln">ajax</span><span class="pun">({</span><span class="pln">
    url</span><span class="pun">:</span><span class="pln"> </span><span class="str">'http://g.cn'</span><span class="pun">,</span><span class="pln">
</span><span class="pun">}).</span><span class="kwd">done</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> status</span><span class="pun">,</span><span class="pln"> xhr</span><span class="pun">){</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">
        JSON</span><span class="pun">.</span><span class="pln">stringify</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">,</span><span class="pln"> </span><span class="lit">4</span><span class="pun">)</span><span class="pln">
    </span><span class="pun">)</span><span class="pln">    
</span><span class="pun">})</span></code></pre><h2>步骤4 - 查看响应的结果</h2>
<pre class="prettyprint language-javascript"><code><span class="com">// 结果1</span><span class="pln">
</span><span class="pun">{</span><span class="pln">
    </span><span class="str">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Elizabeth Hall"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"age"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">91</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"color"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"#0e64ea"</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="com">// 结果2</span><span class="pln">
</span><span class="pun">{</span><span class="pln">
    </span><span class="str">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Michael Taylor"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"age"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">61</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"color"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"#081086"</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="com">// 结果N ..</span></code></pre><h2>结尾</h2>


        </section>
</article>